<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="UTF-8">
  <title>用户管理</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-5">
  <h2>用户管理</h2>

  <!-- 添加用户表单 -->
  <div class="card mb-4">
    <div class="card-header">
      <h5>添加新用户</h5>
    </div>
    <div class="card-body">
      <form th:action="@{/manager/add}" method="post" th:object="${newUser}">
        <div class="form-row">
          <div class="form-group col-md-4">
            <label for="username">用户名</label>
            <input type="text" class="form-control" id="username" th:field="*{username}" required>
          </div>
          <div class="form-group col-md-4">
            <label for="email">邮箱</label>
            <input type="email" class="form-control" id="email" th:field="*{email}" required>
          </div>
          <div class="form-group col-md-4">
            <label for="password">密码</label>
            <input type="password" class="form-control" id="password" th:field="*{password}" required>
          </div>
        </div>
        <div class="form-group">
          <label>角色</label>
          <div th:each="r : ${roles}" class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" name="roleIds" th:value="${r.id}" th:id="${'role_add_' + r.id}">
            <label class="form-check-label" th:for="${'role_add_' + r.id}" th:text="${r.name}"></label>
          </div>
        </div>
        <button type="submit" class="btn btn-success">添加用户</button>
      </form>
    </div>
  </div>

  <!-- 用户列表 -->
  <div class="card">
    <div class="card-header d-flex justify-content-between align-items-center">
      <h5>用户列表</h5>
      <form th:action="@{/manager/search}" method="get" class="form-inline">
        <input type="text" name="keyword" class="form-control mr-2" placeholder="搜索用户名">
        <button type="submit" class="btn btn-outline-primary">搜索</button>
      </form>
    </div>
    <div class="card-body">
      <table class="table table-striped">
        <thead>
        <tr>
          <th>ID</th>
          <th>用户名</th>
          <th>邮箱</th>
          <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <tr th:each="user : ${users}">
          <td th:text="${user.id}"></td>
          <td th:text="${user.username}"></td>
          <td th:text="${user.email}"></td>
          <td>
            <button type="button" class="btn btn-sm btn-primary"
                    data-toggle="modal" data-target="#editModal"
                    th:data-id="${user.id}"
                    th:data-username="${user.username}"
                    th:data-email="${user.email}"
                    th:data-roles="${#strings.listJoin(user.roles.![id], ',')}">
              编辑
            </button>

            <!-- 删除按钮 -->
            <a th:href="@{/manager/delete/{id}(id=${user.id})}"
               class="btn btn-sm btn-danger"
               onclick="return confirm('确定要删除该用户吗?')">
              删除
            </a>
          </td>
        </tr>
        </tbody>
      </table>
    </div>
  </div>

  <!-- 编辑用户模态框 -->
  <div class="modal fade" id="editModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">编辑用户</h5>
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>
        </div>
        <form id="editForm" method="post">
          <div class="modal-body">
            <input type="hidden" id="editId" name="id">
            <div class="form-group">
              <label for="editUsername">用户名</label>
              <input type="text" class="form-control" id="editUsername" name="username" required>
            </div>
            <div class="form-group">
              <label for="editEmail">邮箱</label>
              <input type="email" class="form-control" id="editEmail" name="email" required>
            </div>
            <div class="form-group">
              <label for="editPassword">密码 (不修改请留空)</label>
              <input type="password" class="form-control" id="editPassword" name="password">
            </div>
            <div class="form-group">
              <label>角色</label>
              <div th:each="r : ${roles}" class="form-check form-check-inline">
                <input class="form-check-input" type="checkbox" name="roleIds" th:value="${r.id}" th:id="${'role_edit_' + r.id}">
                <label class="form-check-label" th:for="${'role_edit_' + r.id}" th:text="${r.name}"></label>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
            <button type="submit" class="btn btn-primary">保存修改</button>
          </div>
        </form>
      </div>
    </div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
  <script>
    // 编辑模态框处理
    $('#editModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var id = button.data('id');
      var username = button.data('username');
      var email = button.data('email');

      var modal = $(this);
      modal.find('#editId').val(id);
      modal.find('#editUsername').val(username);
      modal.find('#editEmail').val(email);
      modal.find('#editForm').attr('action', '/manager/update/' + id);
    });
    $('#editModal').on('show.bs.modal', function (event) {
      var button = $(event.relatedTarget);
      var id = button.data('id');
      var username = button.data('username');
      var email = button.data('email');
      var roles = (button.data('roles') || '').toString().split(',').filter(Boolean).map(Number);

      var modal = $(this);
      modal.find('#editId').val(id);
      modal.find('#editUsername').val(username);
      modal.find('#editEmail').val(email);
      modal.find('#editForm').attr('action', '/manager/update/' + id);

      // 先清空勾选
      modal.find('input[name="roleIds"]').prop('checked', false);
      // 勾选已有角色
      roles.forEach(function(rid) {
        modal.find('#role_edit_' + rid).prop('checked', true);
      });
    });
  </script>
</div>

</body>
</html>